<template>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="proid" label="商品编号" width="120" />
        <el-table-column label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img1">
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="商品名称" width="120" />
        <el-table-column prop="brand" label="品牌" width="80" />
        <el-table-column prop="originprice" label="价格" width="100" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column label="是否推荐" width="100">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" />
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
            <el-button link type="primary" size="small">删除</el-button>
        </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" />
</template>

<script setup lang="ts">

import { reactive, ref } from "vue";
import service from "../../../ulit/service";
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue'
// 一、分类
// 定义了分类的数据
const shopping = reactive<string[]>([])
// 获取分类
const getshopping = () => {
    service({
        url: "/pro/getCategory",
    }).then(res => {
        if (res.data.code === '200') {
            shopping.length = 0
            shopping.push(...res.data.data)
        }
    })
}
getshopping()
// 定义查询条件
const query = reactive<{
    category?: string,
    search?: string
}>({
    category: '',
    search: ''
})
// 定义查询的结果（表格里的数据）
interface Igood {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
const list = reactive<Igood[]>([])

// 分页的数据
const params = reactive<{
    count: number,
    limitNum: number
}>({
    count: 1,
    limitNum: 12
})

const total = ref(0);

const searchfun = () => {
    service({
        url: "/pro/list",
        params
    }).then(res => {
        if (res.data.code === '200') {
            total.value = res.data.total;
            // console.log(res.data);
            list.length = 0
            list.push(...res.data.data)
        }
    })
}
searchfun()
const changePage = (value: number) => {
    params.count = value
    searchfun()
}
</script>

<style scoped>
img {
    width: 100px;
    height: 75px;
}
</style>